//引入Vue
import Vue from 'vue';
import VueRouter from 'vue-router'
//导入User组件
// import User from "@/components/User";
//导入Home组件
// import Home from "@/components/Home";
//懒加载(导入Home组件) (懒加载的方式 , 表示用到这个组件 , 再加载这个页面 , 用户效率高了)
const Home = () => import("@/components/Home")
const User = () => import("@/components/User")

const Homenew1 = () => import("@/components/Home/NewHome1")
const Homenew2 = () => import("@/components/Home/NewHome2")

const profile = () => import("@/components/profile")

Vue.use(VueRouter)
//指定几个路由的路径
var routes = [
    //默认页面
    {
        path: '',
        //redirect 重定向
        redirect: '/home'
    },
    //嵌套路由
    {
        path: '/home',
        component: Home,
        meta: {
            title: "首页"
        },
        //    嵌套路由
        children: [
            {
                path: "",
                //重定向
                redirect: 'new1'
            },
            {
                path: "new1",
                component: Homenew1,
                meta: {
                    title: "new1"
                },
            },
            {
                path: "new2",
                component: Homenew2,
                meta: {
                    title: "new2"
                },
            }
        ]
    },
    //指定页面跳转 , 传参的第一个方式
    {
        path: '/user/:userid',
        component: User,
        meta: {
            title: "用户"
        },
    },
    //指定页面跳转 , 传参的第二种方式 , 传送对象
    {
        path: "/profile",
        component: profile,
        meta: {
            title: "档案"
        },
    }

]
//创建一个Router对象 , 创建Router
var router = new VueRouter({
    routes
})

//导航守卫(前置钩子) , 监控路由的跳转(到哪里 , 重哪里 , 下一步)
router.beforeEach((to, from, next) => {
    //重新from跳转到to
    document.title = to.matched[0].meta.title;
    console.log("前置守卫钩子执行了");
    next()
})
//导航守卫(后置钩子) , 监控路由的跳转(到哪里 , 重哪里 , 下一步)
// 后置钩子,  与前置钩子相比 , 执行的较慢一步
router.afterEach((to, from, next) => {
    console.log('后置钩子守卫 执行了');
    next()
})
//把router对象 , 返回出去, 以便于别人可以引用这个路径
export default router
